<html>
<head>
  <meta charset="UTF-8" />
  <title>用户画像</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<body>
<a class="layui-btn" href="/Movie/moviePage">返回首页</a>
<style>
  .container{
    width: 800px;
    height: 800px;
    margin: 0 auto

  }
</style>
<div class="container" id="container"></div>
<script language="JavaScript">
  $(document).ready(function() {
    var chart = {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
    };
    var title = {
      text: '用户画像'
    };
    var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    };
    var plotOptions = {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
          }
        }
      }
    };

    var series= [{
      type: 'pie',
      name: 'label share',
      data: [],

    }];

    var json = {};
    json.chart = chart;
    json.title = title;
    json.tooltip = tooltip;
    json.series = series;
    json.plotOptions = plotOptions;
    $('#container').highcharts(json);



    $.ajax({
      url:'[[@{/user/profile}]]',    //thymeleaf在ajax中设置地址行形式
      type:"POST",
      dataType:"JSON",
      success:function (data){
        if(data.code==0){
          alert(data.msg);
          window.location.href="/user/loginPage"
        }
        else {
          for(let i=0;i<data.data.length;i++){
            let labelWeight = data.data[i];
            series[0].data.push([labelWeight.labelname, labelWeight.weight]);
          }


        $('#container').highcharts({
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
          },
          title: {
            text: '用户画像'
          },
          tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: true,
                format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                style: {
                  color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
              }
            }
          },
          series: series
        });
        }
      }
    });

    return false;

  });
</script>
<!-- body 末尾处引入 layui -->
<script src="../../static/layui/layui.js"></script>
</body>
</html>
